import React, { useState, useEffect } from 'react';
import styled from 'styled-components';
import { useNavigate, useLocation } from 'react-router-dom';

const HeaderContainer = styled.header`
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 2rem;
  height: 60px;
  background: linear-gradient(90deg, rgba(0,20,50,0.9) 0%, rgba(0,40,80,0.9) 50%, rgba(0,20,50,0.9) 100%);
  position: relative;
  z-index: 1000;

  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, 
      transparent 0%, 
      rgba(0,150,255,0.5) 20%, 
      rgba(0,150,255,0.8) 50%,
      rgba(0,150,255,0.5) 80%,
      transparent 100%
    );
  }

  &::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, 
      transparent 0%, 
      rgba(0,150,255,0.5) 20%, 
      rgba(0,150,255,0.8) 50%,
      rgba(0,150,255,0.5) 80%,
      transparent 100%
    );
  }
`;

const Logo = styled.div`
  font-size: 1.2rem;
  font-weight: bold;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 1px;
`;

const Title = styled.div`
  font-size: 1.5rem;
  color: #fff;
  position: relative;
  padding: 0 50px;
  
  &::before,
  &::after {
    content: '';
    position: absolute;
    top: 50%;
    width: 30px;
    height: 2px;
    background: linear-gradient(90deg, rgba(0,150,255,0.8), transparent);
  }

  &::before {
    left: 0;
  }

  &::after {
    right: 0;
    transform: rotate(180deg);
  }
`;

const TimeDisplay = styled.div`
  color: #fff;
  font-size: 1.2rem;
  display: flex;
  align-items: center;
  gap: 10px;

  .date {
    font-size: 0.9rem;
    opacity: 0.8;
  }
`;

const DecorationLeft = styled.div`
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 200px;
  pointer-events: none;
  background: linear-gradient(90deg, 
    rgba(0,150,255,0.2) 0%,
    transparent 100%
  );
  clip-path: polygon(0 0, 100% 0, 80% 100%, 0 100%);
`;

const DecorationRight = styled.div`
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 200px;
  pointer-events: none;
  background: linear-gradient(-90deg, 
    rgba(0,150,255,0.2) 0%,
    transparent 100%
  );
  clip-path: polygon(20% 0, 100% 0, 100% 100%, 0 100%);
`;

const NavButton = styled.button<{ isActive: boolean }>`
  background: ${props => props.isActive ? 
    'linear-gradient(90deg, rgba(0,150,255,0.3) 0%, rgba(0,100,200,0.3) 100%)' : 
    'transparent'};
  border: 1px solid rgba(0,150,255,0.5);
  color: #fff;
  padding: 8px 16px;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
  margin: 0 10px;

  &:hover {
    background: linear-gradient(90deg, rgba(0,150,255,0.2) 0%, rgba(0,100,200,0.2) 100%);
    border-color: rgba(0,150,255,0.8);
  }

  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(0,150,255,0.8));
    animation: ${props => props.isActive ? 'slide 2s linear infinite' : 'none'};
  }

  @keyframes slide {
    100% {
      left: 100%;
    }
  }
`;

const ButtonContainer = styled.div`
  display: flex;
  gap: 10px;
`;

const Header: React.FC = () => {
  const [currentTime, setCurrentTime] = useState(new Date());
  const navigate = useNavigate();
  const location = useLocation();
  const [userInfo, setUserInfo] = useState('');

  const handleLogout = () => {
    localStorage.removeItem('username');
    setUserInfo('');
    navigate('/login');
  };
  const getUser = () => {
    const username = localStorage.getItem('username');
    if (username) {
      setUserInfo(`当前用户: ${username}`);
    }
  };

  useEffect(() => {
    const timer = setInterval(() => {
      setCurrentTime(new Date());
    }, 1000);
    return () => clearInterval(timer);
  }, []);

  useEffect(() => {
    getUser();
  }, [location]);
  // getUser();
  const formatTime = (date: Date) => {
    return date.toLocaleTimeString('zh-CN', {
      hour12: false,
      hour: '2-digit',
      minute: '2-digit',
      second: '2-digit'
    });
  };

  const formatDate = (date: Date) => {
    return date.toLocaleDateString('zh-CN', {
      year: 'numeric',
      month: '2-digit',
      day: '2-digit'
    });
  };

  return (
    <HeaderContainer>
      <DecorationLeft />
      <Logo>LOGO</Logo>
      <ButtonContainer>
        {/* <NavButton 
          isActive={location.pathname === '/earth'} 
          onClick={() => navigate('/earth')}
        >
          地球可视化
        </NavButton>
        <NavButton 
          isActive={location.pathname === '/city-stores'} 
          onClick={() => navigate('/city-stores')}
        >
          城市门店
        </NavButton> */}
      </ButtonContainer>

      <TimeDisplay>
        {userInfo && (
          <div style={{ color: "white" }}>
            {userInfo}
            <NavButton isActive={false} onClick={handleLogout}>
              退出登录
            </NavButton>
          </div>
        )}
        <span>{formatTime(currentTime)}</span>
        <span className="date">{formatDate(currentTime)}</span>
      </TimeDisplay>
      <DecorationRight />
    </HeaderContainer>
  );
};

export default Header;